<template>
  <el-date-picker
    v-model="date"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd"
    @change="handleDateChange"
    :picker-options="pickerOptions"
    :clearable="false"
    >
  </el-date-picker>
</template>

<script>
  export default {
    name: 'DatePicker',
    data() {
      return {
        date: [],
        pickerOptions: {
          // shortcuts: [{
          //   text: '最近一周',
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          //     picker.$emit('pick', [start, end]);
          //   }
          // }, {
          //   text: '最近一个月',
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          //     picker.$emit('pick', [start, end]);
          //   }
          // }, {
          //   text: '最近三个月',
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          //     picker.$emit('pick', [start, end]);
          //   }
          // }]
        }
      }
    },
    methods: {
      handleDateChange() {
        this.$emit('dateChange', this.date)
      }
    }
  }
</script>

<style>
</style>
